<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
</head>
<body>
    <div>当前用户count：<p id="count"></p> </div>
    <br/>
    <button onclick="demo('demo1.1')">demo1.1</button> &nbsp;
    <button onclick="demo('demo1.2')">demo1.2</button> &nbsp;
    <br/>
    <button onclick="demo('demo2.1.1')">demo2.1.1</button> &nbsp;
    <button onclick="demo('demo2.1.2')">demo2.1.2</button> &nbsp;
    <button onclick="demo('demo2.1.3')">demo2.1.3</button> &nbsp;
    <br/>
    <button onclick="demo('demo2.2.1')">demo2.2.1</button> &nbsp;
    <button onclick="demo('demo2.2.2')">demo2.2.2</button> &nbsp;
    <button onclick="demo('demo2.2.3')">demo2.2.3</button> &nbsp;
    <br/>
    <button onclick="demo('demo3.1.1')">demo3.1.1</button> &nbsp;
    <button onclick="demo('demo3.1.2')">demo3.1.2</button> &nbsp;
    <button onclick="demo('demo3.1.3')">demo3.1.3</button> &nbsp;
    <button onclick="demo('demo3.1.4')">demo3.1.4</button> &nbsp;
    <br/>
    <button onclick="demo('demo3.2.1')">demo3.2.1</button> &nbsp;
    <button onclick="demo('demo3.2.2')">demo3.2.2</button> &nbsp;
    <button onclick="demo('demo3.2.3')">demo3.2.3</button> &nbsp;
    <button onclick="demo('demo3.2.4')">demo3.2.4</button> &nbsp;
    <br/>
    <button onclick="demo('demo4.1')">demo4.1</button> &nbsp;
    <button onclick="demo('demo4.2')">demo4.2</button> &nbsp;
    <button onclick="demo('demo4.3')">demo4.3</button> &nbsp;
    <br/>
</body>
<script>
    // 页面加载时执行函数
    document.addEventListener("DOMContentLoaded", function() {
        console.log("DOM fully loaded and parsed.");
        flushCount();
    });
    // 接口调用
    function demo(url) {
        fetch('http://localhost:8111/' + url);
        // 不加延迟的话调用太快了，页面不会刷新
        setTimeout(flushCount, 300);
        // flushCount();
    }
    // 调用函数并刷新界面
    function flushCount() {
        // 使用 fetch 调用本地接口
        fetch('http://localhost:8111/count')
            .then(response => {
                if (!response.ok) {
                    throw new Error('Network response was not ok ' + response.statusText);
                }
                console.log(response);
                return response.json(); // 解析 JSON 响应
            })
            .then(data => {
                document.getElementById('count').innerHTML = data;
                console.log('接口调用成功，返回的数据:', data);
            })
            .catch(error => {
                console.error('接口调用失败:', error);
            });
    }

</script>
</html>